<template>
  <div>
    <i-table :columns="columns1" :data="data1"></i-table>
    <Page
      :total="pageData.total"
      :current="pageData.current"
      :page-size="pageData.size"
      show-elevator
      show-total
      @on-change="changePage"
    ></Page>

    <!--详情窗口-->
    <Modal v-model="detailDig" title="博客详情" @on-ok="ok" @on-cancel="cancel" :fullscreen="true">
      <Layout class="layout">
        <Header style="background: #f8f8f9">
          <span class="author">
            Author /
            <a>{{blogObj.author}}</a>
          </span>
          <span class="publish-time">
            At time /
            <a>{{blogObj.createTime}}</a>
          </span>
          <Icon type="ios-star-outline" />
          {{blogObj.collectCount}}
          <Icon type="ios-thumbs-up-outline" />
          {{blogObj.likeCount}}
        </Header>
        <Layout>
          <Content>
            <div v-html="blogObj.blogContent">{{blogObj.blogContent}}</div>
          </Content>
        </Layout>
        <Footer>
          <!--评论列表-->
          <List>
            <ListItem v-for="(item, index) in commentArr" :key="index">
              <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.content" />
              <template slot="action">
                <li>
                  <a href="#">
                    <Icon type="ios-thumbs-up-outline" />
                    {{item.likeCount}}
                  </a>
                </li>
                <li>
                  <a href="#">
                    <Icon type="ios-chatbubbles-outline" @click="showMore(item.id)" />1
                  </a>
                </li>
              </template>
            </ListItem>
          </List>
        </Footer>
      </Layout>
    </Modal>
  </div>
</template>

<script>
import { blogPage, blogDetail, recommendBlog } from "@/api/blogApi";
import { dealPageData } from "@/utils/myPageUtil";
import { Button } from "iview";
export default {
  name: "blogAdmin",
  //用于刷新页面
  inject: ["reload"],
  data() {
    return {
      detailDig: false, //详情窗口
      commentArr: [], //评论数组
      split1: 0.8,
      blogObj: {
        //博客对象
        id: 0,
        blogContent: "",
        likeCount: 0,
        author: "",
        createTime: "",
        collectCount: 0
      },
      pageData: {
        total: 0,
        current: 1,
        size: 10,
        data: []
      },
      columns1: [
        {
          title: "标题图",
          key: "pictureUrl",
          render: (h, params) => {
            return h("div", [
              h("img", {
                attrs: {
                  src: params.row.pictureUrl
                },
                style: {
                  width: "80px",
                  height: "60px"
                }
              })
            ]);
          }
        },
        {
          title: "标题",
          key: "title"
        },
        {
          title: "简介",
          key: "summary"
        },
        {
          title: "博客点击数",
          key: "clickCount"
        },
        {
          title: "博客收藏数",
          key: "collectCount"
        },
        {
          title: "状态",
          key: "status",
          render: (h, params) => {
            if (params.row.status == 1) {
              return h("span", "正常");
            } else {
              return h("span", "禁用");
            }
          }
        },
        {
          title: "是否原创",
          key: "isOriginal",
          render: (h, params) => {
            if (params.row.delFlag == 1) {
              return h("span", "是");
            } else {
              return h("span", "否");
            }
          }
        },
        {
          title: "作者",
          key: "author"
        },
        {
          title: "文章出处",
          key: "articlesPart"
        },
        {
          title: "分类",
          key: "sortName"
        },
        {
          title: "博客等级",
          key: "level"
        },
        {
          title: "是否发布",
          key: "isPublish",
          render: (h, params) => {
            if (params.row.delFlag == 1) {
              return h("span", "是");
            } else {
              return h("span", "否");
            }
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h("div", [
              //渲染一个div标签
              h(
                Button, //在div标签下渲染一个iview组件
                {
                  props: {
                    //传递参数
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    //设置样式
                    marginRight: "5px"
                  },
                  on: {
                    //监听$emit事件
                    click: () => {
                      this.blogDetail(params.row.id);
                    }
                  }
                },
                "详情"
              ),
              h(
                Button,
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.recommendBlog(params.row.id);
                    }
                  },
                  // 使用自定义指令
                  directives: [
                    {
                      name: "has",
                      // 如有其他参数可以在此添加
                      expression: "blog/recommendBlog"
                    }
                  ]
                },
                "推荐"
              )
            ]);
          }
        }
      ],
      data1: []
    };
  },
  methods: {
    changePage(index) {
      blogPage(index, this.pageData.size).then(res => {
        if (res.data.code == 200) {
          //处理分页
          this.pageData = dealPageData(res.data);
          this.data1 = this.pageData.data;
        }
      });
    },
    recommendBlog(id) {
      //博客推荐
      recommendBlog(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.info("推荐博客成功");
        }
      });
    },
    blogDetail(id) {
      //查询博客详情
      blogDetail(id).then(res => {
        if (res.data.code == 200) {
          let obj = res.data.data.blog;
          this.blogObj.blogContent = obj.content;
          this.blogObj.id = obj.id;
          this.blogObj.createTime = obj.createTime;
          this.blogObj.author = obj.author;
          this.blogObj.likeCount = obj.likeCount;
          this.blogObj.collectCount = obj.collectCount;

          res.data.data.commentList.forEach(item => {
            let obj = {};
            obj.id = item.id;
            obj.title = item.userName + "         " + item.commentTimeStr;
            obj.source = item.source;
            obj.likeCount = item.likeCount;
            obj.content = item.content;
            obj.avatar = item.avatar;
            this.commentArr.push(obj);
          });
        }
      });
      this.detailDig = true;
    },
    ok() {
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    cancel() {
      //刷新当前页面,保证数据表单数据清空
      this.reload();
    },
    showMore(id) {
      //查看更多的评论
      this.$Message.info(id);
    }
  },
  created() {
    //加载分页数据
    blogPage(this.pageData.current, this.pageData.size).then(res => {
      if (res.data.code == 200) {
        //处理分页
        this.pageData = dealPageData(res.data);
        this.data1 = this.pageData.data;
      }
    });
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.article-content {
  width: auto;

  @media only screen and (max-width: 768px) {
    margin: 5px 5px 10px 5px;
  }

  @media screen and (min-width: 768px) {
    margin: 10px 10px 20px 10px;
  }

  @media screen and (min-width: 992px) {
    margin: 15px 35px 50px 35px;
  }

  @media screen and (min-width: 1200px) {
    width: 1200px;
    margin: 15px auto 0;
  }

  .layout-left, .layout-right {
    padding: 0;

    @media only screen and (max-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 768px) {
      padding: 0;
    }

    @media screen and (min-width: 992px) {
      padding: 0 10px;
    }

    @media screen and (min-width: 1200px) {
      padding: 0 10px;
    }
  }
}
</style>
